<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框</title>
		<style>
		     /*选择器  抓取页面上的元素  给元素添加效果【添加一个样式】   元素选择器*/
			 div{
				 /* 边框复合属性   生产1个像素实线橙色的边框*/
				 border: 1px solid #9e9e9e; 
				 width: 500px;
				 height: 500px;
			 }
			 /* 需求：第二个div 边框颜色改成黑色*/
			 /* id选择器   html元素前标记 加id=“别名”
			               css中   #别名  抓到元素
			class选择器  html元素前标记 加class="别名1 别名2 "
			            css中 .别名  抓到元素
			*/
			 #d2{
				 border: 10px solid #1c681c;
				 background-color: #ffffff;
				 /* 子属性：border-style 边框样式属性*/
				 border-style: dotted;
				 /* 虚线  双实线*/
				 border-style: dashed;
				 border-style: double;
				 /* 子属性：border-color  边框颜色属性*/
				 border-color: #ffaa00;
			 }
			 .d4{
				 /* border边框属性【复合属性】 width style color*/
				 border: 20px solid #f00 ;
				 /* 子属性：border-width 边框的宽度属性*/
				 /* 需求：第三个div 40像素*/
				 border-width: 40px;
				 /* 需求：上边框宽度20px 点线*/
				 border-top: 20px dotted #f00;
				 /* 需求：上边框加颜色 */
				 border-top-color: #ff0;
				 /* 需求：下边框宽度调整为1px*/
				 border-bottom-width: 1px;
				 /* 需求：左边框双实线效果*/
				 border-left-style: double;
				 /* 需求：右边框 5px 虚线 绿色*/
				 border-right: 5px dashed #1c681c;
				 border-radius: ;
			 }
			 /* border-radius边框倒角属性:边框或者背景颜色
			  画圆：宽高与倒角一致
			  border-radius属性值：1个值 代表 上 右 下 左 【顺时针】
			                      2个值 代表 上 下 | 右 左【顺时针】
								  3个值 代表 上 | 右 左 | 下【顺时针】
								  4个值 代表 上 | 右 | 下 | 左【顺时针】
		      练习：画圆，4个颜色	 鼠标悬停 旋转
					第三div 添加 悬停效果---伪类选择器：追加效果
					                       语法：任意选择器：hover  悬停效果 功能
			  */
				 .d5{
					 border:8px solid #f00;
					 border-radius: 50%;
					 border-top-color: #aaee73;
					 border-left-color: #2773ee;
					 border-right-color: #ee6298;
					 border-bottom-color: #ee6a3e;
					 /* 过渡属性：悬停效果增加过渡时间*/
					 transition:transform 10s;
				 }
				 /* 第三个div追加悬停效果*/
				 .d4:hover{
					 /* 效果：旋转*/
					 /* 转换属性：属性值*/
					 transform:rotate(360deg);
					
				 }
				
				 	
				 </style>
		</style>
	</head>
	<body>
	    <!--div  有宽没高的空间 
		   css边框的使用---选择器
		 -->
		<div></div>
		<div id="d2"></div>
		<div class="d3 d4 d5"></div>
	</body>
</html>